<template>
  <div>
  <el-form label-width="80px" size="small" @submit.native.prevent>
    <el-form-item label="跳过表达式">
      <el-input v-model="bpmnFormData.skipExpression" @change="updateElementTask('skipExpression')"/>
    </el-form-item>
    <el-form-item label="是否为补偿">
      <el-input v-model="bpmnFormData.isForCompensation" @change="updateElementTask('isForCompensation')"/>
    </el-form-item>
    <el-form-item label="服务任务可触发">
      <el-input v-model="bpmnFormData.triggerable" @change="updateElementTask('triggerable')"/>
    </el-form-item>
  </el-form>
  </div>
</template>

<script setup>
import { reactive, watch, inject } from 'vue';
import { StrUtil } from "@/utils/StrUtil";

// 属性定义
const props = defineProps({
  id: {
    type: String,
    required: true
  }
});

// 注入modelerStore
const modelerStore = inject('modelerStore');

// 状态定义
const bpmnFormData = reactive({});

// 监听ID变化
watch(() => props.id, (newVal) => {
  if (StrUtil.isNotBlank(newVal)) {
    resetTaskForm();
  }
}, { immediate: true });

// 重置表单
const resetTaskForm = () => {
  // 使用 Object.assign 更新响应式对象
  Object.assign(bpmnFormData, modelerStore.element.businessObject);
};

// 更新元素任务属性
const updateElementTask = (key) => {
  const taskAttr = Object.create(null);
  taskAttr[key] = bpmnFormData[key] || null;
  modelerStore.modeling.updateProperties(modelerStore.element, taskAttr);
};
</script>
